<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>电影网首页</title>
		 
		 <link rel="shortcut icon" type="image/x-icon" href="../imgs/yc.png" />
		 <link rel="stylesheet"  type="text/css" href="../layui/css/layui.css" />
		 <link rel="stylesheet " type="text/css" href="../css/index.css" />
		  
	</head>
	<body>
		<!-- head start -->
	<div class="head">
		<div class="layui-row">
		    <div class="layui-col-md3">
		      <img class="head-logo" src="../imgs/logo.png" />
		    </div>
		    <div class="layui-col-md1">
		       <a href="#">首页</a>
		    </div>
			<div class="layui-col-md1">
			   <a href="#">首页</a>
			</div>
			<div class="layui-col-md1">
			   <a href="#">首页</a>
			</div>
			<div class="layui-col-md1">
			   <a href="#">首页</a>
			</div>
			<div class="layui-col-md1">
			   <a href="#">首页</a>
			</div>
			<div class="layui-col-md1">
			   <a href="#">首页</a>
			</div>
			<div class="layui-col-md1">
			   <a href="#">首页</a>
			</div>
			<div class="layui-col-md2">
			   <a href="#"><img class="head-teacher" src="../imgs/teacher.png"/></a>
			</div>
			 
		  </div>
		
		
	</div>	


	<!-- pics start -->
	<div class="pics">
		<div class="layui-carousel" id="test1">
		  <div carousel-item>
		    <div><img src="../imgs/slide01.jpg"/></div>
		    <div><img src="../imgs/slide02.jpg"/></div>
		    <div><img src="../imgs/slide03.jpg"/></div>
		    <div><img src="../imgs/slide04.jpg"/></div>
		    <div><img src="../imgs/slide05.jpg"/></div>
		  </div>
		</div>
		
		
		
	</div>
	
	<!-- article  start -->
	<div class="article">
		
		<div class="layui-fluid">
		  <fieldset class="layui-elem-field layui-field-title">
		    <legend>上映电影</legend>
		  </fieldset>
		  <div class="layui-row" id="yc-movies">
		    <div class="layui-col-md2">
		      <div class="grid-demo  ">

				  <div class="article-text">
					  <a href="#"><img class="fpics" src="../imgs/default.jpg"/></a>
					  <p class="fname">中国减贫</p>
					  <p class="score">9.0</p>
				  </div>
		   	 </div>
			</div>

		  </div>
		</div>
		 

		<!--分页标签-->
		<div id="demo7"></div>
		
	</div>
	
	
	<!-- footer start -->
	<div class="footer"></div>
		
		
		
		
	</body>
	
	<script src="../layui/layui.js"></script>
	
	<script>
	layui.use(  function(){
	  var carousel = layui.carousel
			  ,laypage = layui.laypage
			  ,$ = layui.jquery;
	  //建造实例
	  carousel.render({
	    elem: '#test1'
	    ,width: '100%' //设置容器宽度
	    ,arrow: 'always' //始终显示箭头
	    //,anim: 'updown' //切换动画方式
	  });
	  let limit =24;
	  let count = 0;
	  let flag = false;//表示是否为第一次查询电影数据

		//显示电影信息
		finds(1,limit);

		function finds(curr,limit) {
			$.get("../movie",{op:"finds",page:curr,limit:limit},function (rs) {
				if(rs.code ==200){
					showMovies(rs.data);
					count = rs.count;
					//首次访问 显示分页组件
					if(flag == false){
						showPage();
					}
					flag=true;
				}
				else{
					layer.msg(rs.msg);
					$("#yc-movies").html('');
				}
			},"json");

		}

		function showMovies(arr) {
			let str = '';
			for(let i=0;i<arr.length;i++){
				str += ' <div class="layui-col-md2">' +
						'<div class="grid-demo  ">' +
						'<div class="article-text">' +
						'<a href="'+arr[i].murl+'"><img class="fpics" src="'+arr[i].mpic+'"/></a>' +
						'<p class="fname">'+arr[i].mname+'</p>' +
						'<p class="score">'+arr[i].mscore+'</p>' +
						'</div>' +
						'</div>' +
						'</div>'

			}
			$("#yc-movies").html(str);


		}

		//分页
		function showPage() {
			//完整功能
			laypage.render({
				elem: 'demo7'
				,count: count
				,limit:limit
				,limits:[10,15,20,25,30]
				,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
				,jump: function(obj){
					 if(flag ==true){ //不是第一次查询电影数据  调用finds()
						 finds(obj.curr,obj.limit);
					 }
				}
			});


		}





	});
	</script>
</html>
